<template>
  <view class="filter-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <uni-icons type="back" size="24"></uni-icons>
      </view>
      <view class="nav-title">筛选</view>
      <view class="nav-right" @click="resetFilter">
        <text>重置</text>
      </view>
    </view>
    
    <!-- 筛选内容区域 -->
    <scroll-view scroll-y class="filter-content">
      <!-- 部门筛选 -->
      <view class="filter-section">
        <view class="section-title">部门</view>
        <view class="option-list">
          <view 
            class="option-item" 
            v-for="(item, index) in departments" 
            :key="index"
            :class="{ active: selectedDepartment === item }"
            @click="selectDepartment(item)"
          >
            <text>{{ item }}</text>
          </view>
        </view>
      </view>
      
      <!-- 状态筛选 -->
      <view class="filter-section">
        <view class="section-title">状态</view>
        <view class="option-list">
          <view 
            class="option-item" 
            v-for="(item, index) in statusList" 
            :key="index"
            :class="{ active: selectedStatus === item }"
            @click="selectStatus(item)"
          >
            <text>{{ item }}</text>
          </view>
        </view>
      </view>
      
      <!-- 其他筛选条件 -->
      <view class="filter-section">
        <view class="section-title">其他</view>
        <view class="option-list">
          <view 
            class="option-item" 
            v-for="(item, index) in otherFilters" 
            :key="index"
            :class="{ active: selectedOtherFilters.includes(item) }"
            @click="toggleOtherFilter(item)"
          >
            <text>{{ item }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部确认按钮 -->
    <view class="bottom-bar">
      <button class="confirm-btn" @click="confirmFilter">确定</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      departments: ['全部', '部门A', '部门B', '部门C'],
      statusList: ['全部', '即将到期', '已到期', '已终止'],
      otherFilters: ['只看我的', '显示已删除', '显示已归档'],
      selectedDepartment: '全部',
      selectedStatus: '全部',
      selectedOtherFilters: []
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    resetFilter() {
      this.selectedDepartment = '全部'
      this.selectedStatus = '全部'
      this.selectedOtherFilters = []
    },
    selectDepartment(department) {
      this.selectedDepartment = department
    },
    selectStatus(status) {
      this.selectedStatus = status
    },
    toggleOtherFilter(filter) {
      const index = this.selectedOtherFilters.indexOf(filter)
      if (index > -1) {
        this.selectedOtherFilters.splice(index, 1)
      } else {
        this.selectedOtherFilters.push(filter)
      }
    },
    confirmFilter() {
      const filterResult = {
        department: this.selectedDepartment,
        status: this.selectedStatus,
        otherFilters: this.selectedOtherFilters
      }
      uni.$emit('updateFilter', filterResult)
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
.filter-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.nav-bar {
  background-color: #fff;
  height: 88rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  position: relative;
  
  .nav-left {
    position: absolute;
    left: 30rpx;
  }
  
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
  }
  
  .nav-right {
    position: absolute;
    right: 30rpx;
    font-size: 28rpx;
    color: #666;
  }
}

.filter-content {
  flex: 1;
  padding: 20rpx;
}

.filter-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    
    .option-item {
      padding: 12rpx 24rpx;
      background-color: #f5f5f5;
      border-radius: 30rpx;
      font-size: 26rpx;
      color: #666;
      
      &.active {
        background-color: #e6f7ff;
        color: #1890ff;
      }
    }
  }
}

.bottom-bar {
  background-color: #fff;
  padding: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .confirm-btn {
    background-color: #1890ff;
    color: #fff;
    border-radius: 44rpx;
    font-size: 32rpx;
    height: 88rpx;
    line-height: 88rpx;
    
    &:active {
      opacity: 0.8;
    }
  }
}
</style>